import React, { Component } from 'react'
import HomeCss from './Home.module.css'
import { AppstoreOutlined } from '@ant-design/icons'
import { Carousel } from 'antd';
import img1 from './images/1.jpg'
import img2 from './images/2.jpg'
import img3 from './images/3.jpg'
import img4 from './images/4.jpg'
import img5 from './images/5.jpg'
import img6 from './images/6.jpg'
import img7 from './images/7.jpg'
import img8 from './images/8.jpg'
import img9 from './images/9.jpg'
import img10 from './images/10.jpg'
import img11 from './images/11.jpg'
import img12 from './images/12.jpg'
import img13 from './images/13.jpg'
import img14 from './images/14.jpg'
import img17 from './images/17.jpg'
import HomeNav from '../../components/home/HomeNav'
import HomeCxb from '../../components/home/HomeCxb'
import { Link } from 'react-router-dom';
const Style = {
  width: '20%',
  height: '1.89rem',
  color: '#fff',
  textAlign: 'center',
  float: 'left',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignIitems: 'center'
};
const contentStyle = {
  color: '#fff',
};
export default class Home extends Component {
  constructor() {
    super()
    this.state = {
      inputvalue: '',
      homeList: [],

    }
  }
  render() {
    return (
      <div className={HomeCss.content}>
        <header className={HomeCss.header}>
          <Link to='/search'><button className={HomeCss.button}>DUNK 熊猫</button></Link>
          <div className={HomeCss.fl}>
            <Link to='/kind'><AppstoreOutlined style={{ fontSize: '0.5rem', color: '#666' }} />
              <span className={HomeCss.span}>分类</span></Link>
          </div>
        </header>
        <section className={HomeCss.section}>
          <Carousel effect="fade" autoplay dots={false} style={{ padding: '0 0.46rem' }}>
            <div>
              <h4 className={HomeCss.h4} style={contentStyle}>
                <img className={HomeCss.img} src={img1} />
              </h4>
            </div>
            <div>
              <h4 className={HomeCss.h4} style={contentStyle}>
                <img className={HomeCss.img} src={img2} />
              </h4>
            </div>
            <div>
              <h4 className={HomeCss.h4} style={contentStyle}>
                <img className={HomeCss.img} src={img3} />
              </h4>
            </div>
            <div>
              <h4 className={HomeCss.h4} style={contentStyle}>
                <img className={HomeCss.img} src={img4} />
              </h4>
            </div>
            <div>
              <h4 className={HomeCss.h4} style={contentStyle}>
                <img className={HomeCss.img} src={img5} />
              </h4>
            </div>
          </Carousel>
          <Carousel dots={false} style={{ marginTop: '23px', borderBottom: '1px solid #eee', padding: '0 5%' }}>
            <div>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img6} />
                <span className={HomeCss.span} style={{ color: '#333' }}>球鞋</span>
              </h3>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img7} />
                <span className={HomeCss.span} style={{ color: '#333' }}>美妆</span>
              </h3>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img8} />
                <span className={HomeCss.span} style={{ color: '#333' }}>中国制造</span>
              </h3>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img9} />
                <span className={HomeCss.span} style={{ color: '#333' }}>二手</span>
              </h3>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img10} />
                <span className={HomeCss.span} style={{ color: '#333' }}>服饰</span>
              </h3>
            </div>
            <div>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img11} />
                <span className={HomeCss.span} style={{ color: '#333' }}>速达瑕疵</span>
              </h3>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img12} />
                <span className={HomeCss.span} style={{ color: '#333' }}>配饰</span>
              </h3>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img13} />
                <span className={HomeCss.span} style={{ color: '#333' }}>盲盒包邮</span>
              </h3>
              <h3 className={HomeCss.h3} style={Style}>
                <img className={HomeCss.img} src={img14} />
                <span className={HomeCss.span} style={{ color: '#333' }}>担保预售</span>
              </h3>
            </div>
          </Carousel>
          <h2 className={HomeCss.h2}>畅销榜</h2>
          <HomeCxb />
          <div className={HomeCss.zs}>
            <img className={HomeCss.img} src={img17} />
          </div>
          <HomeNav />
        </section>
        <footer className={HomeCss.footer}></footer>
      </div>
    )
  }
}
